<template>
  <div class="allnotes-main">
    <div class="allnotes-main-note" v-for="(item, index) in notesList" :key="index">
      <el-image
        :src="'/images/' + item.cover"
        fit="cover"
        class="allnotes-main-note-image"
        v-if="item.cover !== ''"
        @click="clickNoteImage(item.id)"
      />
      <div class="allnotes-main-note-main">
        <div class="allnotes-main-note-title">
          <span>{{ item.title }}</span>
        </div>
        <div class="allnotes-amin-note-detail">
          <div>
            点赞: <span>{{ item.likes }}</span>
          </div>
        </div>
        <div class="allnotes-main-note-date">
          {{
            new Date(item.createTime).getFullYear() +
            '年' +
            new Date(item.createTime).getMonth() +
            '月' +
            new Date(item.createTime).getDate() +
            '日'
          }}
        </div>
        <div class="allnotes-main-note-bottom">
          <div class="allnotes-main-note-bottom-role allnotes-main-note-bottom-options">
            权限设置
          </div>
          <div class="allnotes-main-note-bottom-edit allnotes-main-note-bottom-options">编辑</div>
          <div class="allnotes-main-note-bottom-del allnotes-main-note-bottom-options">删除</div>
        </div>
      </div>
    </div>
  </div>
</template>

<!--数据浏览页面-->
<script setup>
import { userInfoStore } from '@/stores/user'
import request from '@/utils/request.js'
import { ref, reactive } from 'vue'
import Cookies from 'js-cookie'
//分页
const startPage = ref(1)
const size = 40
//笔记数组
const notesList = ref([])

const userInfo = userInfoStore()

request
  .post('/user/notesByUser?startPage=' + startPage.value + '&size=' + size, {
    headers: { token: Cookies.get('token') }
  })
  .then((res) => {
    notesList.value = res.records.sort((a, b) => {
      return b.id - a.id
    })
    console.log(notesList)
  })
</script>

<style lang="scss" scoped>
.allnotes-main {
  width: 100%;
  .allnotes-main-note {
    width: 100%;
    height: 180px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    margin: 10px;
    border-radius: 5px;
    transition: background-color 0.5s;
    .allnotes-main-note-image {
      padding-left: 30px;
      border: 5px;
      height: 80%;
      width: 120px;
    }
    .allnotes-main-note-main {
      height: 80%;
      padding-left: 20px;
      .allnotes-main-note-title {
      }
      .allnotes-main-note-date {
        font-size: 12px;
        padding-top: 10px;
        color: rgb(129, 129, 129);
      }
      .allnotes-amin-note-detail {
        font-size: 12px;
        padding-top: 10px;
        color: rgb(129, 129, 129);
      }
      .allnotes-main-note-bottom {
        display: flex;
        padding-top: 55px;
        .allnotes-main-note-bottom-options {
          padding-right: 20px;
          color: white;
          font-size: 14px;
          cursor: pointer;
        }
        .allnotes-main-note-bottom-role:hover {
          color: blue !important;
        }
        .allnotes-main-note-bottom-edit:hover {
          color: blue !important;
        }
        .allnotes-main-note-bottom-del:hover {
          color: blue !important;
        }
      }
    }
  }
  .allnotes-main-note:hover {
    background-color: rgb(235, 235, 235);
    transition: background-color 0.5s;
    .allnotes-main-note-main {
      .allnotes-main-note-bottom {
        .allnotes-main-note-bottom-options {
          color: rgb(74, 74, 74);
        }
      }
    }
  }
}
</style>
